<template>
  <button
    class="base-btn"
    v-bind="$attrs"
  >
    <slot />
  </button>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

<style scoped>
.base-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-small);
  border: none;
  background: transparent;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: background-color 0.2s;
  color: #000000;  /* 添加黑色文本颜色 */
}

.base-btn :deep(svg) {  /* 添加深度选择器来修改图标颜色 */
  color: #000000;
  stroke: #000000;
}

.base-btn:hover {
  background-color: var(--vt-c-white-mute);
}
</style>